<template>
  <div class="map-component">
    <div ref="mapContainer" class="map-container" :style="mapStyle"></div>
    <div v-if="!mapInitialized && !previewMode" class="map-placeholder" @click="configMap">
      <i class="el-icon-location placeholder-icon"></i>
      <p class="placeholder-text">点击配置地图</p>
    </div>
    
    <!-- 地图配置对话框 -->
    <el-dialog
      title="地图配置"
      v-model="configDialogVisible"
      width="500px"
      v-if="!previewMode"
    >
      <el-form :model="mapConfig" label-width="100px">
        <el-form-item label="地图类型">
          <el-select v-model="mapConfig.type">
            <el-option label="基础地图" value="base" />
            <el-option label="卫星地图" value="satellite" />
            <el-option label="混合地图" value="hybrid" />
          </el-select>
        </el-form-item>
        <el-form-item label="中心坐标">
          <div style="display: flex; gap: 10px;">
            <el-input 
              v-model="mapConfig.center.lng" 
              placeholder="经度"
              type="number"
            />
            <el-input 
              v-model="mapConfig.center.lat" 
              placeholder="纬度"
              type="number"
            />
          </div>
        </el-form-item>
        <el-form-item label="缩放级别">
          <el-slider 
            v-model="mapConfig.zoom"
            :min="1"
            :max="18"
            show-stops
          />
        </el-form-item>
        <el-form-item label="显示控件">
          <el-checkbox-group v-model="mapConfig.controls">
            <el-checkbox label="zoom">缩放控件</el-checkbox>
            <el-checkbox label="scale">比例尺</el-checkbox>
            <el-checkbox label="toolBar">工具栏</el-checkbox>
            <el-checkbox label="mapType">地图类型</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="标记点">
          <el-button @click="addMarker" size="small">添加标记</el-button>
          <div v-for="(marker, index) in mapConfig.markers" :key="index" class="marker-item">
            <el-input v-model="marker.title" placeholder="标记标题" size="small" />
            <el-input v-model="marker.lng" placeholder="经度" type="number" size="small" />
            <el-input v-model="marker.lat" placeholder="纬度" type="number" size="small" />
            <el-button @click="removeMarker(index)" size="small" type="danger">删除</el-button>
          </div>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="configDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveConfig">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
import { Message } from 'element-ui'
import type { ComponentConfig } from '../../interface'

// Props
interface Props {
  componentData: ComponentConfig
  previewMode?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  previewMode: false
})

// Emits
const emit = defineEmits<{
  update: [property: string, value: any]
}>()

// 响应式数据
const mapContainer = ref<HTMLElement>()
const configDialogVisible = ref(false)
const mapInstance = ref<any>()
const mapInitialized = ref(false)

const mapConfig = ref({
  type: 'base',
  center: { lng: 116.397428, lat: 39.90923 }, // 北京天安门
  zoom: 10,
  controls: ['zoom', 'scale'],
  markers: [] as Array<{ title: string; lng: number; lat: number }>
})

// 计算属性
const mapStyle = computed(() => {
  const style = props.componentData.style || {}
  return {
    width: '100%',
    height: '100%',
    backgroundColor: style.backgroundColor || '#f0f0f0',
    ...style
  }
})

// 配置地图
const configMap = () => {
  if (props.previewMode) return
  
  // 初始化配置
  const config = props.componentData.props?.config
  if (config) {
    mapConfig.value = { ...config }
  }
  
  configDialogVisible.value = true
}

// 保存配置
const saveConfig = () => {
  emit('update', 'props.config', { ...mapConfig.value })
  configDialogVisible.value = false
  
  nextTick(() => {
    initMap()
  })
  
  Message.success('地图配置保存成功')
}

// 添加标记
const addMarker = () => {
  mapConfig.value.markers.push({
    title: '新标记',
    lng: mapConfig.value.center.lng,
    lat: mapConfig.value.center.lat
  })
}

// 删除标记
const removeMarker = (index: number) => {
  mapConfig.value.markers.splice(index, 1)
}

// 初始化地图 (模拟地图API)
const initMap = () => {
  if (!mapContainer.value) return
  
  // 清空容器
  mapContainer.value.innerHTML = ''
  
  const config = props.componentData.props?.config || mapConfig.value
  
  // 创建模拟地图
  const mapDiv = document.createElement('div')
  mapDiv.style.cssText = `
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #e8f5e8 25%, transparent 25%), 
                linear-gradient(-45deg, #e8f5e8 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #e8f5e8 75%), 
                linear-gradient(-45deg, transparent 75%, #e8f5e8 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
  `
  
  // 添加地图信息
  const infoDiv = document.createElement('div')
  infoDiv.style.cssText = `
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 4px;
    text-align: center;
  `
  
  infoDiv.innerHTML = `
    <div>地图类型: ${config.type === 'base' ? '基础地图' : config.type === 'satellite' ? '卫星地图' : '混合地图'}</div>
    <div>中心: ${config.center.lng}, ${config.center.lat}</div>
    <div>缩放: ${config.zoom}</div>
    ${config.markers.length > 0 ? `<div>标记点: ${config.markers.length}个</div>` : ''}
  `
  
  mapDiv.appendChild(infoDiv)
  
  // 添加标记点
  config.markers.forEach((marker: any, index: number) => {
    const markerDiv = document.createElement('div')
    markerDiv.style.cssText = `
      position: absolute;
      top: ${20 + index * 30}px;
      left: ${20 + index * 30}px;
      width: 20px;
      height: 20px;
      background: #ff4444;
      border-radius: 50%;
      border: 2px solid white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.3);
      cursor: pointer;
    `
    markerDiv.title = marker.title
    mapDiv.appendChild(markerDiv)
  })
  
  mapContainer.value.appendChild(mapDiv)
  mapInitialized.value = true
}

// 监听配置变化
watch(() => props.componentData.props?.config, () => {
  if (props.componentData.props?.config) {
    nextTick(() => {
      initMap()
    })
  }
}, { immediate: true, deep: true })

// 生命周期
onMounted(() => {
  nextTick(() => {
    if (props.componentData.props?.config) {
      initMap()
    }
  })
})

onUnmounted(() => {
  if (mapInstance.value) {
    // 清理地图实例
    mapInstance.value = null
  }
})
</script>

<style lang="scss" scoped>
.map-component {
  width: 100%;
  height: 100%;
  position: relative;
}

.map-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.map-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border: 1px dashed #ddd;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background-color: #f0f0f0;
    border-color: #409eff;
  }

  .placeholder-icon {
    font-size: 48px;
    color: #ccc;
    margin-bottom: 8px;
  }

  .placeholder-text {
    margin: 0;
    font-size: 14px;
    color: #999;
  }
}

.marker-item {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;

  .el-input {
    flex: 1;
  }
}

.dialog-footer {
  text-align: right;
}
</style>
